<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<div class="panel panel-default" >
    <div class="container-fluid">
        <div class="panel-body " >
            <%--<form:form class="form-horizontal" id="destinationForm" action="${pageContext.request.contextPath}/destination/createDestination/add" method="post"  modelAttribute="customerForm">--%>
            <!--<form class="form-horizontal" id="countryForm" action="${pageContext.request.contextPath}/destination/create" method="post">-->
            <div><h5>Selecteer een land of maak een <a href="country">nieuw land</a> aan</h5></div>
            <select id="countryname" name="countryname" onChange="javascript:getRegions(this.value);">
                <option value="">Selecteer</option>
                <c:forEach var="country" items="${countries}">
                    <option value="${country.id}" >${country.name}</option>
                </c:forEach>
            </select>
            <div name="regions" id="regions" style="display:none;">
                <div><h5>Selecteer een regio of maak een <a href="" id="regionLink">nieuwe regio</a> aan</h5></div>
                <select id="regionname" name="regionname" onChange="javascript:getCities(this.value);">
                    <option value="">Selecteer</option>
               </select>
            </div>
            <div name="cities" id="cities" style="display:none;">
                <div><h5>Maak een <a href="" id="cityLink">nieuwe stad</a> aan</h5></div>
                <select id="cityname" name="cityname">
                    <option value="">Selecteer</option>
               </select>
            </div>
        </div>
    </div>
</div>
            
<script>
    function getRegions(value) {
        // Get the selectbox in which the regions need to go.
        var selRegions = document.getElementById('regionname');
        var lenRegions = selRegions.length;
        // Get the div which need to be shown
        var selectedDivRegions = document.getElementById('regions');
        var selectedDivCities = document.getElementById('cities');
        
        if (value !== '') {
            // Clear the existing regions in case of swith between country.
            for (var i=lenRegions; i; i--) {
                par = selRegions.options[i-1].parentNode;
                par.removeChild( selRegions.options[i-1] );
            }

            selectedDivRegions.style.display = '';
            selectedDivCities.style.display='none';

            $.ajax({
                url: window.location.origin + "/reisorg-empl-site/region/getbycountryid/" + value,
                type: "GET",
                dataType: 'json',
                contentType: 'application/jsons',
                success: function (region, textStatus, jqXHR)
                {
//                    debugger;
                    var newOption = document.createElement("option");
                    newOption.text = "Selecteer";
                    newOption.value = "";
                    selRegions.options.add(newOption);
                    
                    for (i=0; i<region.length; i++) {
                        var newOption = document.createElement("option");
                        newOption.text = region[i].name;
                        newOption.value = region[i].id;
                        selRegions.options.add(newOption);
                    }
                    //Set the URL of the href
                    document.getElementById("regionLink").href="region/" + value;
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
//                    debugger
                    alert("Mislukt om een connectie met de server te maken");
                }
            });
        } else {
//            debugger;
            selectedDivRegions.style.display = 'none';
            selectedDivCities.style.display = 'none';
        }
     }
     
    function getCities(value) {
        // Get the selectbox in which the regions need to go.
        var selCities = document.getElementById('cityname');
        var lenCities = selCities.length;
        // Get the dive which need to be shown
        var selectedDivCities = document.getElementById('cities');
        
        if (value >= 1) {
            // Clear the existing regions in case of swith between country.
            for (var i=lenCities; i; i--) {
                parCities = selCities.options[i-1].parentNode;
                parCities.removeChild( selCities.options[i-1] );
            }

            selectedDivCities.style.display = '';

            $.ajax({
                url: window.location.origin + "/reisorg-empl-site/city/getbyregionid/" + value,
                type: "GET",
                dataType: 'json',
                contentType: 'application/jsons',
                success: function (region, textStatus, jqXHR)
                {
//                    debugger;
                    var newOption = document.createElement("option");
                    newOption.text = "Selecteer";
                    newOption.value = "";
                    selCities.options.add(newOption);
                    
                    for (i=0; i<region.length; i++) {
                        var newOption = document.createElement("option");
                        newOption.text = region[i].name;
                        newOption.value = region[i].id;
                        selCities.options.add(newOption);
                    }
                    //Set the URL of the href
                    document.getElementById("cityLink").href="city/" + value;
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
//                    debugger
                    alert("Mislukt om een connectie met de server te maken");
                }
            });
        } else {
//            debugger;
            selectedDivCities.style.display = 'none';
        }
     }
     
</script>
